import React from "react";
import { ContentContainer } from "./style";

export default function Content(props) {
  const onChange = (currIndexName) => {
    props.setCurrentIndexName(currIndexName);
  };
  let { data, currentIndexName } = props;
  return (
    <ContentContainer>
      <div>
        <ul>
          {Object.keys(data) && Object.keys(data).map((item, index) => (
            <li
              onClick={() => onChange(item)}
              key={index}
              className={item === currentIndexName ? "active" : ""}
            >
              <span>{item}</span>
            </li>
          ))}
        </ul>
      </div>
      <div>
        <ul>
          {data[currentIndexName] && data[currentIndexName].map((item,index)=>(
            <li key={index}>{item}</li>
          ))}
        </ul>
      </div>
    </ContentContainer>
  );
}
